<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<link href="jquery.uploadify-v2.1.0/example/css/default.css"
			rel="stylesheet" type="text/css" />
		<link href="jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet"
			type="text/css" />

		<script type="text/javascript"
			src="jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script>

		<script type="text/javascript"
			src="jquery.uploadify-v2.1.0/swfobject.js"></script>

		<script type="text/javascript"
			src="jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.js"></script>

		<script type="text/javascript">
		var webContext = "${pageContext.request.contextPath}";
        $(document).ready(function()
        {
            $("#uploadify").uploadify({
                'uploader': 'jquery.uploadify-v2.1.0/uploadify.swf',
                'script': 'upload.action',
                'cancelImg': 'jquery.uploadify-v2.1.0/cancel.png',
				'scriptData': {'id':'1'},
				'queueID': 'fileQueue',//与下面的id对应
				'fileDataName'   : 'uploadify',//和input的name属性值保持一致就好，Struts2就能处理了
				'queueSizeLimit': 1,
				'fileDesc': '图片',   
				'fileExt': '*.jpg;*.png;', //控制可上传文件的扩展名，启用本项时需同时声明fileDesc
				'displayData': 'speed',//百分比'percentage'，速度：'speed'
				'auto': false,
				'multi': false,
				'sizeLimit':20971520, //20*1024*1024 ,单位bity
				'simUploadLimit': 2,
				'buttonText': 'browse',
				 'onComplete': function (event, queueID, fileObj, response, data){
                 $("#imageUrl").val(response);
				 imageDisplay();                 
                 $("#result").html(fileObj.name+"上传成功");//显示上传成功结果
                  setInterval("showResult()",1000000000);//两秒后删除显示的上传成功结果
                  
                }
            });
        });  
        
       	function showResult(){//删除显示的上传成功结果
          $("#result").html("");
        }
        function checkForm(){
        	var imageUrl = $("#imageUrl").val();
        	var title = $("#title").val();
        	var iapid = $("#iapid").val();
        	if(imageUrl ==null || imageUrl==""){
        		$("#errorMsg").text("请上传专辑封面");
        		return false;
        	}else if(title == null || title ==""){
        		$("#errorMsg").text("请输入专辑标题");
        		return false;
        	}else if(iapid == null || iapid ==""){
        		$("#errorMsg").text("请输入产品id");
        		return false;
        	}else{
        		$("#errorMsg").text();
        		return true;
        	}
        }
        function imageDisplay(){
			var imageUrl = $("#imageUrl").val();
			$("#imageDisplayArea").html("<img width=\"200\" height=\"160\" src="+webContext+"/imageDisplay.action?imageUrl="+imageUrl+" />");
		}
    </script>
	<link href="${pageContext.request.contextPath}/css/globaltd.css" rel="stylesheet" type="text/css">
	</head>
	<body>
	<form id="form1" action="${pageContext.request.contextPath}/doAddAblu.action" method="post" onsubmit="return checkForm()">
	
		<div class="nav" id="navText">
			添加专辑
		</div>
		<div class="mold">
			<div class="mold-inner">
				<table border="0" id="data-object">
					<tbody>
						<tr>
							<td width="20" valign="top">&nbsp;</td>
							<td>
								<div id="errorMsg" style="color: red"></div>								
								<table cellspacing="0" cellpadding="0" even="true"
									class="mold-list tdpad industry-list" style="line-height: 30px;">
									<tbody>
										<tr class="even">
											<td width="176" style="padding-left: 6px;">
												<label for="i0">
													专辑封面
												</label>
											</td>
											<td style="padding-left: 6px;">
												<div id="fileQueue" style="float:left"></div>											
												<div style="height: 100px;" id="imageDisplayArea"></div>										
												<input type="file" name="uploadify" id="uploadify" />
												<input type="hidden" name="imageUrl" id="imageUrl" />
												<br/>
												<p>
													<a href="javascript:jQuery('#uploadify').uploadifyUpload()">开始上传</a>&nbsp;
													<a href="javascript:jQuery('#uploadify').uploadifyClearQueue()">取消上传</a>
												</p>
												<div id="result"></div>
											</td>
										</tr>
										<tr>
											<td style="padding-left: 6px;">
												<label for="i4">
													专辑标题
												</label>
											</td>
											<td style="padding-left: 6px;">
												<input type="text" id="title" name="title" size="49"/>
											</td>
										</tr>
										<tr class="even">
											<td style="padding-left: 6px;">
												<label for="i4">
													专辑类型
												</label>
											</td>
											<td style="padding-left: 6px;">
												<select id="type" name="type">
													<option value="1">学院类</option>
													<option value="2">电影类</option>
													<option value="3">明星类</option>
												</select>
											</td>
										</tr>
										<tr >
											<td style="padding-left: 6px;">
												<label for="i4">
													是否免费
												</label>
											</td>
											<td style="padding-left: 6px;">
												<select id="isFree" name="isFree">
													<option value="1">免费</option>
													<!--  <option value="2">收费</option>-->
												</select>
											</td>
										</tr>
										<tr class="even">
											<td style="padding-left: 6px;">
												<label for="i4">
													收费金额
												</label>
											</td>
											<td style="padding-left: 6px;">
												<input type="text" id="value" name="value" />
											</td>
										</tr>
										<tr class="even">
											<td style="padding-left: 6px;">
												<label for="i4">
													产品ID
												</label>
											</td>
											<td style="padding-left: 6px;">
												<input type="text" id="iapid" name="iapid" />
											</td>
										</tr>
										<tr>
											<td style="padding-left: 6px;">
												<label for="i4">
													专辑描述
												</label>
											</td>
											<td style="padding-left: 6px;">
												<textarea id="remark" name="remark" rows="3" cols="40"></textarea>
											</td>
										</tr>
									</tbody>
								</table>
							</td>
						</tr>
					</tbody>
				</table>
				<table width="100%"  border="0">
					<tr>
						<td align="center">
							<input type="submit"  value="提交">
							<input type="button" onclick="history.go(-1);" value="返回">
						</td>
					</tr>
				</table>

			</div>
		</div>
		</form>
	</body>
</html>
